<template>
  <div class="registerDetail" ref="contentData">
    <van-row>
      <van-col span="12">
        <div class="con_box">
          <div class="com_title">联系人信息</div>
          <div class="pc_contact">
            <div
              class="contactItem flex"
              v-if="dataSource.customerName || dataSource.mobile"
            >
              <div class="contact_lt">
                <div class="header flex">
                  <div class="txt">客户</div>
                  <div class="name">
                    {{
                      dataSource.customerName ? dataSource.customerName : '-'
                    }}
                  </div>
                </div>
                <div class="tel">
                  {{ dataSource.mobile ? dataSource.mobile : '-' }}
                </div>
              </div>
              <div class="contact_rt" v-if="dataSource.mobile">
                <a @click="handleTel(dataSource.mobile)">
                  <i class="iconfont icon-tel"></i>
                </a>
                <i class="iconfont icon-wx"></i>
              </div>
            </div>
            <div
              class="contactItem flex"
              v-if="dataSource.ownerName || dataSource.ownerPhone"
            >
              <div class="contact_lt">
                <div class="header flex">
                  <div class="txt">车主</div>
                  <div class="name">
                    {{ dataSource.ownerName ? dataSource.ownerName : '-' }}
                  </div>
                </div>
                <div class="tel">
                  {{ dataSource.ownerPhone ? dataSource.ownerPhone : '-' }}
                </div>
              </div>
              <div class="contact_rt" v-if="dataSource.ownerPhone">
                <a @click="handleTel(dataSource.ownerPhone)">
                  <i class="iconfont icon-tel"></i>
                </a>
                <i class="iconfont icon-wx"></i>
              </div>
            </div>
            <div
              class="contactItem flex"
              v-if="dataSource.contactPeople || dataSource.contactPhone"
            >
              <div class="contact_lt">
                <div class="header flex">
                  <div class="txt">送修人</div>
                  <div class="name">
                    {{
                      dataSource.contactPeople ? dataSource.contactPeople : '-'
                    }}
                  </div>
                </div>
                <div class="tel">
                  {{ dataSource.contactPhone ? dataSource.contactPhone : '-' }}
                </div>
              </div>
              <div class="contact_rt" v-if="dataSource.contactPhone">
                <a @click="handleTel(dataSource.contactPhone)">
                  <i class="iconfont icon-tel"></i>
                </a>
                <i class="iconfont icon-wx"></i>
              </div>
            </div>
          </div>
        </div>
      </van-col>
      <van-col span="12">
        <div class="con_box">
          <div class="com_title">车辆基本信息</div>
          <!-- 列表 -->
          <div class="pcCarInfo">
            <div class="flex">
              <div class="carInfobox">
                <div class="carInfobox_con">
                  <div class="carInfobox_data">
                    <div class="carInfobox_data_label">车架号</div>
                    <div class="txt">{{ carInfo.vinCode }}</div>
                  </div>
                  <div class="carInfobox_data">
                    <div class="carInfobox_data_label">所属维修中心</div>
                    <div class="txt">{{ carInfo.fixCenterName }}</div>
                  </div>
                  <div class="carInfobox_data">
                    <div class="carInfobox_data_label">上牌时间</div>
                    <div class="txt">{{ carInfo.repairtime }}</div>
                  </div>
                  <div class="carInfobox_data">
                    <div class="carInfobox_data_label">车牌号</div>
                    <div class="txt">{{ carInfo.carNo }}</div>
                  </div>
                  <div class="carInfobox_data">
                    <div class="carInfobox_data_label">所属服务顾问</div>
                    <div class="txt">{{ carInfo.serverPsnName }}</div>
                  </div>
                  <div class="carInfobox_data">
                    <div class="carInfobox_data_label">待使用卡券</div>
                    <div class="txt">{{ carInfo.dateIn }}</div>
                  </div>
                  <div class="carInfobox_data">
                    <div class="carInfobox_data_label">车型</div>
                    <div class="txt">{{ carInfo.carModelNameName }}</div>
                  </div>
                  <div class="carInfobox_data">
                    <div class="carInfobox_data_label">最近进场时间</div>
                    <div class="txt">{{ carInfo.lastIn }}</div>
                  </div>
                  <div class="carInfobox_data">
                    <div class="carInfobox_data_label">车辆来源</div>
                    <div class="txt">{{ carInfo.carType }}</div>
                  </div>
                  <div class="carInfobox_data">
                    <div class="carInfobox_data_label">最近进场里程数</div>
                    <div class="txt">{{ carInfo.carMile }}km</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </van-col>
      <van-col span="24">
        <div class="taskDetail_box">
          <div class="com_title">任务信息</div>
          <!-- 列表 -->
          <div class="pc_taskDetail">
            <div class="flex">
              <div class="carInfobox">
                <div class="carInfobox_con">
                  <div class="carInfobox_data">
                    <div class="carInfobox_data_label">车牌号</div>
                    <div class="txt">{{ carInfo.carNo }}</div>
                  </div>
                  <div class="carInfobox_data">
                    <div class="carInfobox_data_label">任务状态</div>
                    <div class="txt">{{ dataSource.oneBillStauts }}</div>
                  </div>
                  <div class="carInfobox_data">
                    <div class="carInfobox_data_label">任务生成时间</div>
                    <div class="txt">{{ dataSource.taskCreateTime }}</div>
                  </div>
                  <div class="carInfobox_data">
                    <div class="carInfobox_data_label">最近跟进时间</div>
                    <div class="txt">{{ dataSource.lastFollowInTime }}</div>
                  </div>

                  <div class="carInfobox_data">
                    <div class="carInfobox_data_label">最近跟进方式</div>
                    <div class="txt">{{ dataSource.followType }}</div>
                  </div>
                  <div class="carInfobox_data">
                    <div class="carInfobox_data_label">任务跟进人员</div>
                    <div class="txt">{{ dataSource.taskPerson }}</div>
                  </div>
                  <div class="carInfobox_data">
                    <div class="carInfobox_data_label">车架号</div>
                    <div class="txt">{{ carInfo.vinCode }}</div>
                  </div>
                  <div class="carInfobox_data">
                    <div class="carInfobox_data_label">任务类型</div>
                    <div class="txt">{{ dataSource.taskTypeName }}</div>
                  </div>
                  <div class="carInfobox_data">
                    <div class="carInfobox_data_label">任务描述</div>
                    <div class="txt long_txt">{{ dataSource.taskDes }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </van-col>
      <van-col span="12">
        <div class="con_box followH">
          <div class="com_title">跟进记录</div>
          <div
            class="followInfo"
            v-if="dataSource.followEntry && dataSource.followEntry.length != 0"
          >
            <div
              class="followInfo_item flex"
              v-for="(item, index) in dataSource.followEntry"
              :key="index"
            >
              <div class="followInfo_lt">
                <div class="followInfo_time">{{ item.followDate }}</div>
                <i class="iconfont icon-circle"></i>
              </div>

              <div class="followInfo_rt">
                <div class="followInfo_num">{{ item.followNumber }}</div>
                <div class="followInfo_data">
                  跟进方式：{{ item.followType }}
                </div>
                <div class="followInfo_data">
                  跟进结果：{{ item.followResult }}
                </div>
                <div class="followInfo_data">
                  到店时间：{{ item.followDate }}
                </div>
                <div class="followInfo_data">
                  跟进备注：{{ item.folloeNote }}
                </div>
                <div class="followInfo_data">
                  下次跟进时间：{{ item.nextFollowDate }}
                </div>
                <div class="followInfo_data flex">
                  <div>跟进补充：</div>
                </div>
              </div>
            </div>
          </div>
          <van-empty class="noContent martop" description="暂无数据" v-else />
          <div class="addBtn">
            <div class="orderItem_filebox" @click="addFollow">
              <i class="iconfont icon-add"></i>
              添加跟进记录
            </div>
          </div>
        </div>
      </van-col>
      <van-col span="12">
        <div class="con_box">
          <div class="com_title">车辆关联任务</div>
          <div
            class="orderList"
            v-if="relevanceList && relevanceList.length != 0"
          >
            <div
              class="orderItem"
              v-for="(item, index) in relevanceList"
              :key="index"
            >
              <div class="orderItem_header">
                <div class="orderItem_lt" @click="getDetail(item.billId)">
                  <div class="carNo">{{ item.taskName }}</div>
                  <div class="txt">跟进人：{{ item.taskPerson }}</div>
                </div>
                <div class="orderItem_rt">前往处理</div>
              </div>
            </div>
          </div>
          <van-empty class="noContent martop" description="暂无数据" v-else />
        </div>
        <div class="con_box">
          <div class="com_title">预约记录</div>
          <div class="orderList" v-if="applyList && applyList.length != 0">
            <div
              class="orderItem"
              v-for="(item, index) in applyList"
              :key="index"
            >
              <div class="orderItem_header">
                <div class="orderItem_lt" @click="goApplyDetail(item)">
                  <div class="carNo">{{ item.carNo }}</div>
                  <div class="carStatus">{{ item.billStatus }}</div>
                </div>
                <div class="orderItem_rt">
                  <a @click="handleTel(dataSource.mobile1)">
                    <i class="iconfont icon-tel"></i>
                  </a>
                  <div class="iconfont icon-wx"></div>
                </div>
              </div>
              <div class="orderItem_content" @click="goApplyDetail(item)">
                <div class="orderItem_data">
                  <div class="order_label">客户名称</div>
                  <div class="txt">{{ item.customerName }}</div>
                </div>
                <div class="orderItem_data">
                  <div class="order_label">所属服务顾问</div>
                  <div class="txt">{{ item.empName }}</div>
                </div>
                <div class="orderItem_data">
                  <div class="order_label">车型</div>
                  <div class="txt">{{ item.carModel }}</div>
                </div>
                <div class="orderItem_data">
                  <div class="order_label">工单类型</div>
                  <div class="txt">{{ item.workBillType }}</div>
                </div>
                <div class="orderItem_data time">
                  <div class="order_label">预约进场时间</div>
                  <div class="txt">{{ item.dateIn }}</div>
                </div>
              </div>
            </div>
          </div>
          <van-empty class="noContent martop" description="暂无数据" v-else />
          <div class="addBtn">
            <div class="orderItem_filebox" @click="applyRepair">
              <i class="iconfont icon-add"></i>
              新增预约
            </div>
          </div>
        </div>
      </van-col>
      <van-col span="12">
        <div class="con_box">
          <div class="com_title">车辆维修履历</div>
          <div class="repairData" v-if="repairList && repairList.length != 0">
            <div
              class="repairItem"
              v-for="(item, index) in repairList"
              :key="index"
              @click="goRepairDetail(item)"
            >
              <div class="item_title flex">
                <div>
                  <div class="txt">{{ item.repairNumber }}</div>
                  <div class="rebox flex">
                    <div class="price">
                      合计金额： {{ item.repairVoucherAmt }}元
                    </div>
                    <div>进场时间：{{ item.repairBizDate }}</div>
                  </div>
                </div>

                <div>{{ item.repairWorkBillType }}</div>
              </div>
            </div>
          </div>
          <van-empty class="noContent martop" description="暂无数据" v-else />
        </div>
      </van-col>
      <van-col span="12">
        <div class="con_box">
          <div class="com_title">车辆续保信息</div>
          <van-empty class="noContent martop" description="暂无数据" />
        </div>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import {
  Search,
  Empty,
  Field,
  Form,
  Uploader,
  DatetimePicker,
  Tab,
  Tabs,
  ImagePreview,
  Toast,
} from 'vant'
import taskApi from '@/api/taskApi'
import repairApi from '@/api/repairApi'
import { getCookies, isPhone } from '@/utils/util.js'
import carApi from '@/api/carApi'
import store from '@/store'

export default {
  name: 'taskCenterDetail',
  components: {
    Search,
    Empty,
    Field,
    Form,
    Uploader,
    DatetimePicker,
    Tab,
    Tabs,
    ImagePreview,
    Toast,
  },
  props: {
    detailId: {
      type: String,
      default: null,
    },
  },

  watch: {
    detailId: {
      handler: function (val, oldVal) {
        if (val) {
          this.getDetail(val)
        }
      },
      deep: true,
      immediate: false,
    },
  },
  data() {
    return {
      showTimerPicker: false,
      dataSource: {
        billId: '1', //单据id
        taskTypeName: '', //任务类型
        taskName: '', //任务名称
        oneBillStatus: '', //任务一级状态
        twoBillStatus: '', //任务二级状态
        carModelName: '', //车型
        customerName: '', //客户名称
        mobile: '', //电话
        ownerName: '', //车主姓名
        ownerPhone: '', //车主电话
        contractPeople: '', //送修人姓名
        contractPhone: '', //送修电话
        taskCreateTime: '', //任务生成时间
        carNo: '', //车牌号
        carId: '', //车牌ID
        taskPerson: '', //任务跟进人
        lastFollowInTime: '', //最近跟进时间
        followType: '', //跟进方式
        taskDes: '', //任务描述
        followEntry: [
          {
            entryId: '1', //分录ID
            followDate: '08-09', //跟进日期
            followNumber: '2099233', //跟进编码
            nextFollowDate: '2023-07-07', //下次跟进日期
            followResult: '预约回店', //跟进结果
            followType: '手机', //跟进方式
            followSupple: '', //跟进补充
            failed: '', //战败原因
            followPerson: '张三', //跟进人
            followNote: '跟进备注', //跟进备注
          },
          {
            entryId: '1', //分录ID
            followDate: '08-09', //跟进日期
            followNumber: '2099233', //跟进编码
            nextFollowDate: '2023-07-07', //下次跟进日期
            followResult: '预约回店', //跟进结果
            followType: '手机', //跟进方式
            followSupple: '', //跟进补充
            failed: '', //战败原因
            followPerson: '张三', //跟进人
            followNote: '跟进备注', //跟进备注
          },
        ],

        timer: '2022-01-01 10:20:20',
        brand: '帕拉梅拉',
        repairId: '厦门保时捷',
        userName: '张某某',
        car: '',
        vin: 'LAAHHHHASSSSSAa',
        carNo: '',
        tel: '',
        repair: '',
        mileage: '2200',
        label: ['活跃客户', '8年车', '男'],
      },
      uploader: [],
      columns: [],
      showSelectPicker: false,
      disabled: false,
      detailId: '',
      tabActive: 0,
      recordList: [
        {
          id: 1,
          name: '闽D66666定期保养招揽',
          status: 2,
          insure: 2,
          time: '2023-06-25 12:29:30',
          address: '福建省厦门市思明区',
          vin: 'LKHHAHHHAHHHHAYYYYA',
          tel: '13333333333',
          userName: '张某某',
          servieName: '高某某',
          carType: ' CT5 2,0T',
          mileage: '9999',
        },
        {
          id: 2,
          name: '闽D66666',
          status: 2,
          insure: 2,
          time: '2023-06-25 12:29:30',
          address: '福建省厦门市思明区',
          vin: 'LKHHAHHHAHHHHAYYYYA',
          tel: '16666666666',
          userName: '张某某',
          servieName: '高某某',
          carType: ' CT5 2,0T',
          mileage: '9999',
        },
      ],
      statusList: [
        { name: '已处理', code: 1, check: false },
        { name: '未处理', code: 2, check: false },
      ],
      userId: getCookies('userId'), //用户ID，必填，String
      carInfo: {
        id: '', //单车id
        vinCode: '', //车架号
        fixCenterId: '', //维修中心ID
        fixCenterName: '', //维修中心名称
        fixCenterNumber: '', //维修中心编码
        serverPsnId: '', //所属服务顾问ID
        serverPsnName: '', //所属服务顾问名字
        serverPsnNumber: '', //所属服务顾问编码
        carModelId: '', //车型ID
        carModelNameName: '', //车型名称
        carModelNumber: '', //车型编码
        lastIn: '', //上次进场时间
        carMile: '', //行驶里程数
        deliverTime: '', //购车时间
        inusuranceDate: '', //保险到期时间
        repairtime: '', //保修到期时间
        label: [], //标签
      },
      cardList: [],
      repairList: [
        // {
        //   repairNumber: '111',
        //   repairNo: 'SRGGGGGAAA-001',
        //   repairWorkBillType: '一般工单',
        //   serviceName: '张某某',
        //   time: '2023-09-01 15:30',
        //   allPrice: 2020,
        //   carPrice: 1000,
        //   remark:
        //     '更换蓄电池；更换蓄电池；更换蓄电池；更换蓄电池；更换蓄电池；更换蓄电池；更换蓄电池；更换蓄电池',
        //   status: '已开工单',
        //   repairBizDate: '2023-09-01 15:30',
        //   repairVoucherAmt: '600',
        // },
      ],
      applyParams: {
        codeNo: '', //车架号或者车牌号，String，必填
        pageNo: 1, //当前页数，默认从1开始，每页显示十条，int，不能为空或者小于1
        startDateIn: '', //预约开始时间，日期yyyy-MM-dd
        endDateIn: '', //预约结束时间，日期yyyy-MM-dd
        fixCenterId: '', //维修中心ID值
        serverPsnId: '', //所属服务顾问，ID值
        billStatus: '', //预约单状态
        bookingType: '', //预约单类型
        fixCenterName: '',
        serverPsnName: '',
        enDateIn: '',
        billSatus: '',
      },
      relevanceParams: {
        codeNo: '', //车架号或者车牌号，String，必填
        pageNo: 1, //当前页数，默认从1开始，每页显示十条，int，不能为空或者小于1
        oneBillStatus: '', //任务一级状态
        twoBillStatus: '', //任务二级状态
        taskTypeId: '', //任务类型ID值
        taskPersonId: '', //任务跟进人，ID值
        fixCenterId: '',
        serverPsnId: '',
        taskStartCreateTime: '',
        taskEndCreateTime: '',
        isExceed: '', //是否逾期，1为是，0为否
        isGenRepBook: '', //是否生成维修预约单
        billId: '', //本身单据ID，此为详细界面使用
        carId: '', //车辆ID，此为详细界面使用
        userId: getCookies('userId'), //用户ID，必填，String
      },
      applyList: [],
      relevanceList: [],
      repairRequestParams: {
        codeNo: '', //车架号或者车牌号，String，必填
        pageNo: 1, //当前页数，默认从1开始，每页显示十条，int，不能为空或者小于1
        startDateIn: '', //进场开始时间，日期yyyy-MM-dd
        endDateIn: '', //进场结束时间，日期yyyy-MM-dd
        startFinishDate: '', //完工开始时间，日期yyyy-MM-dd
        endFinishDate: '', //完工结束时间，日期yyyy-MM-dd
        startSettleTime: '', //结算开始时间，日期yyyy-MM-dd
        endSettleTime: '', //结算结束时间，日期yyyy-MM-dd
        workBillType: '', //工单类型，枚举
        serverPsnId: '', //维修中心ID
        fixCenterId: '', //服务顾问ID
        userId: getCookies('userId'), //用户ID，必填，String
      },
    }
  },

  mounted() {
    if (this.$route.query) {
      this.detailId = this.$route.query.billId
      this.getDetail(this.detailId)
    }
  },
  methods: {
    getDetail(billId) {
      taskApi
        .getCustomerTaskById({ billId, userId: this.userId })
        .then((res) => {
          if (res.data) {
            this.dataSource = res.data
            this.getCoupon(this.dataSource.carId)
            this.getCarInfoBase(this.dataSource.carId)
            this.getApplyRecord()
            this.getRelevanceTask()
            this.getRepairworkorder()
            window.scrollTo({
              top: 0,
              behavior: 'smooth',
            })
          }
        })
    },
    // 获取卡券信息
    getCoupon(id) {
      repairApi.getCoupon({ id, userId: this.userId, isReturnInvalidCoupons: '是' }).then((res) => {
        this.cardList = res.data
      })
    },
    // 车辆详情
    getCarInfoBase(id) {
      carApi.getCarInfoBase({ id }).then((res) => {
        if (res.code == 1) {
          res.data.label = res.data.label ? res.data.label.split(';') : []
          if (res.data && res.data.label && res.data.label.length != 0) {
            res.data.label.length = res.data.label.length - 1
          }

          this.carInfo = res.data
          // let  carInfo = {
          //   fixCenterId:this.carInfo.fixCenterId,
          //   fixCenterName: this.carInfo.fixCenterName,
          //   carModelId: this.carInfo.carModelNameId,
          //   carModelName: this.carInfo.carModelNameName,
          //   carNo: this.carInfo.carNo,
          // }
          // store.commit("setAddCarInfo",carInfo );
        }
      })
    },
    // 预约记录
    getApplyRecord() {
      repairApi
        .queryRepairBooking({
          ...this.applyParams,
          codeNo: this.dataSource.carNo,
        })
        .then((res) => {
          this.applyList = res.data
        })
    },

    // 关联任务
    getRelevanceTask() {
      taskApi
        .getCustomerTaskList({
          ...this.relevanceParams,
          codeNo: this.dataSource.carNo,
          billId: this.dataSource.billId,
        })
        .then((res) => {
          this.relevanceList = res.data
        })
    },

    // 履历
    getRepairworkorder(id) {
      carApi.getRepairworkorder({ id: this.dataSource.carId }).then((res) => {
        if (res.code == 0) {
          this.repairList = res.data
        }
      })
    },

    //维修预约
    applyRepair() {
      this.$router.push({
        path: 'applyRepairEdit',
        query: { taskId: this.dataSource.billId, carId: this.dataSource.carId },
      })
    },
    // 获取list名称
    getFieldName(list, key, val) {
      if (list && list.length > 0) {
        let obj = list.filter((item) => {
          return item[key] == val
        })
        if (obj.length > 0) {
          return obj[0].name
        }
      }
      return null
    },
    // 图片预览
    previewImg() {
      ImagePreview([
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcbu01.alicdn.com%2Fimg%2Fibank%2F2020%2F555%2F900%2F14381009555_1565283795.jpg&refer=http%3A%2F%2Fcbu01.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1693918952&t=87f1097ef82261cd8c0511a89a676704',
      ])
    },
    // 添加跟进记录
    addFollow() {
      this.$router.push({
        path: '/taskCenterEdit',
        query: { billId: this.detailId },
      })
    },
    handleTel(tel) {
      if (isPhone()) {
        window.location.href = `tel:${tel}`
      } else {
        Toast('请在手机端使用此功能')
      }
    },
    goTaskDetail(data) {
      this.$router.push({
        path: '/taskCenterDetail',
        query: { billId: data.billId },
      })
    },
    goApplyDetail(data) {
      this.$router.push({
        path: '/applyRepairDetail',
        query: { billId: data.billId },
      })
    },
    goRepairDetail(data) {
      this.$router.push({
        path: '/repairOrderDetail',
        query: { billId: data.repairId },
      })
    },
  },
}
</script>

<style lang="less" scoped>
.con_box {
  border: 1px solid #f3f3f3;
  width: 100%;
  height: 5.5rem;
  background: #fff;
  margin-right: 0.2rem;
  box-sizing: content-box;
  position: relative;
  /deep/.van-empty__image {
    width: 80px;
    height: 80px;
  }
  .com_title {
    position: relative;
    background: #dcdcdc;
    font-size: 0.32rem;
    padding: 0.2rem;
    &::before {
      content: '';
      background: #409eff;
      width: 4px;
      position: absolute;
      height: 20px;
      top: 7px;
      left: 0;
    }
  }
}
.followH {
  height: 11rem;
  background: #fff;
}

.flex {
  display: flex;
  align-items: center;
}
.registerDetail {
  background: #f3f3f3;
  overflow: auto;
  height: calc(100vh - 1rem);
  .detail_header {
    justify-content: space-between;
    margin: 0.2rem 0.2rem;
    border-radius: 5px;
    background: #fff;
    padding: 0.3rem;

    .detail_header_lt {
      .carNo {
        font-size: 0.32rem;
        font-weight: bold;
        margin-bottom: 0.2rem;
        align-items: center;
        .icon-right {
          margin-left: 0.2rem;
          color: #409eff;
        }
        .status {
          border: 1px solid #299a00;
          color: #299a00;
          padding: 0.05rem 0.2rem;
          text-align: center;
          font-size: 0.22rem;
          border-radius: 3px;
          margin-left: 0.2rem;
        }
      }
      .hank {
        font-size: 0.28rem;
        color: #666;
        .name {
          border-right: 2px solid #ccc;
          padding-right: 0.1rem;
          margin-right: 0.1rem;
        }
      }
    }
    .detail_header_rt {
      justify-content: flex-start;
      .txt {
        font-size: 0.28rem;
        color: #161616;
      }
      .icon-tel {
        font-size: 0.64rem;
        color: #35bc04;
        margin-right: 0.1rem;
        // position: relative;
        // top: -2px;
        // color: #fff;
        // background: #35bc04;
        // font-size: 0.32rem;
        // padding: 0.1rem;
        // border-radius: 50%;
        // margin-right: 0.1rem;
      }
    }
  }
  .formData {
    background: #fff;
  }
}

.labelList {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.label_item {
  color: #299a00;
  border: 1px solid #299a00;
  border-radius: 4px;
  margin-right: 0.1rem;
  padding: 0.01rem 0.2rem;
  font-size: 0.2rem;
  margin-bottom: 0.1rem;
  &:last-child {
    margin-right: 0;
  }
}
.tabBarBox {
  margin-top: 0.2rem;
}
.tabCar {
  margin-top: 0.1rem;
}
// 卡券
.cardList {
  margin: 0.1rem 0.2rem 0.3rem 0.2rem;
  box-sizing: border-box;

  .cardItem {
    background: #fff;
    border-radius: 10px;
    box-sizing: border-box;
    overflow: hidden;
    margin-bottom: 0.2rem;
    .box {
      overflow: hidden;
      .cardItem_lt {
        padding: 0.3rem 0.2rem;
        text-align: center;
        box-sizing: content-box;
        background: #ff58c2;
        color: #fff;
        overflow: hidden;
        height: 1.4rem;
        width: 30%;
        .price_icon {
          font-size: 0.3rem;
          color: #fff;
        }
        .price {
          color: #fff;

          .txt {
            font-size: 0.8rem;
            font-weight: bold;
          }
          .name {
            font-size: 0.28rem;
          }
        }
      }
      .cardItem_rt {
        padding: 0.3rem;
        border-bottom: 1px dashed #ccc;
        overflow: hidden;
        height: 1.4rem;
        width: 70%;
        .label_name {
          .label_txt {
            background: #ff3415;
            color: #fff;
            border-radius: 3px;
            text-align: center;
            padding: 0.07rem 0.2rem;
            font-size: 0.24rem;
            margin-right: 0.1rem;
          }
          .label_txt1 {
            color: #333;
            font-size: 0.28rem;
            font-weight: bold;
          }
        }
        .label_time {
          margin-top: 0.2rem;
          font-size: 0.26rem;
          color: #666;
        }
      }
    }
    .cardNo {
      padding: 0.2rem 0.3rem 0.2rem 0.2rem;
      font-size: 0.28rem;
      color: #333;
    }
  }
}

// 维修
.repairData {
  margin: 0.1rem 0.2rem 0.3rem 0.2rem;
  box-sizing: border-box;
  overflow: hidden;

  .repairItem {
    background: #fff;
    overflow: hidden;
    border-radius: 5px;
    padding: 0.2rem;
    margin-bottom: 0.2rem;
    .item_title {
      justify-content: space-between;
      padding: 0.1rem 0;
      border-bottom: 1px solid #f1f1f1;
      font-size: 0.28rem;
      margin-bottom: 0.3rem;
      position: relative;
      .rebox {
        font-size: 0.26rem;
        color: #666;
        margin-top: 0.1rem;
        .price {
          margin-right: 0.1rem;
        }
      }
    }
    .item_content {
      padding: 0 0.3rem;
      .item_contentbox {
        justify-content: space-between;
      }
      .item_data {
        font-size: 0.28rem;
        margin-bottom: 0.2rem;
        display: flex;
        .item_data_label {
          color: #333;
        }
        .item_data_value {
          color: #262626;
          &.txt {
            line-height: 0.32rem;
          }
        }
      }
      .item_data_width {
        width: 4.5rem;
      }
    }
  }
}

// 联系人
.contactbox {
  margin: 0.1rem 0.2rem 0.3rem 0.2rem;

  .contactItem {
    justify-content: space-between;
    background: #fff;
    padding: 0.2rem;
    margin-bottom: 0.1rem;
    border-radius: 4px;
    .contact_lt {
      .header {
        margin-bottom: 0.2rem;
        color: #333;

        .txt {
          font-size: 0.2rem;
          margin-right: 0.2rem;
          background: #409eff;
          padding: 0.1rem 0.2rem;
          border-radius: 4px;
          color: #fff;
        }
        .name {
          font-size: 0.28rem;
        }
      }
      .tel {
        font-size: 0.3rem;
        color: #333;
      }
    }
    .contact_rt {
      .icon-wx {
        font-size: 0.7rem;
        color: #409eff;
      }
      .icon-tel {
        font-size: 0.64rem;
        color: #35bc04;
        margin-right: 0.1rem;
        // font-size: 0.36rem;
        // background: #35bc04;
        // color: #fff;
        // text-align: center;
        // padding: 0.1rem;
        // border-radius: 50%;
        // position: relative;
        // top: -6px;
        // margin-right: 0.1rem;
      }
    }
  }
}
.addBtn {
  width: 100%;
  background: #fff;
  padding-bottom: 0.5rem;
  .orderItem_filebox {
    width: 2.8rem;
    margin: auto;
    text-align: center;
    font-size: 0.28rem;
    background: #409eff;
    color: #fff;
    padding: 0.25rem 0rem;
    border-radius: 50px;
  }
}
.relationTitle {
  padding-left: 0.2rem;
  border-left: 4px solid #409eff;
  margin-left: 0.3rem;
  margin-top: 0.3rem;
  font-size: 0.26rem;
}
.orderList {
  margin: 0.2rem;
  overflow: hidden;
  padding-bottom: 1.5rem;
  height: 3rem;
  overflow: auto;

  .orderItem {
    padding: 0.3rem;
    background: #fff;
    border-radius: 10px;
    margin-bottom: 0.3rem;
    .orderItem_header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0.3rem;
      padding-bottom: 0.2rem;
      border-bottom: 1px solid #f6f6f6;
      position: relative;
      .orderItem_lt {
        .carNo {
          font-size: 0.3rem;
          color: #333;
          margin-right: 0.2rem;
          font-weight: bold;
        }
        .txt {
          font-size: 0.26rem;
          color: #999;
          margin-top: 0.1rem;
        }

        .carStatus {
          background: #35bc04;
          color: #fff;
          border-radius: 4px;
          padding: 0.1rem 0.2rem;
          font-size: 0.24rem;
          text-align: center;
          width: 1rem;
          margin-top: 0.1rem;
        }
      }
      .orderItem_rt {
        display: flex;
        align-items: center;
        align-self: center;
        justify-content: flex-start;
        color: #666;
        font-size: 0.28rem;

        .txt {
          font-size: 0.28rem;
          color: #161616;
        }
        .icon-tel {
          font-size: 0.64rem;
          color: #35bc04;
          margin-right: 0.1rem;
          // color: #fff;
          // background: #35bc04;
          // font-size: 0.32rem;
          // padding: 0.1rem;
          // border-radius: 50%;
          // margin-right: 0.2rem;
        }
        .icon-wx {
          color: #409eff;
          font-size: 0.65rem;
        }
      }
    }
    .orderItem_content {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      align-items: center;
      .orderItem_data {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: 50%;
        margin-bottom: 0.2rem;
        font-size: 0.28rem;
        box-sizing: content-box;
        color: #333;
        .order_label {
          font-size: 0.28rem;
          color: #333;
          width: 1.8rem;
        }
        .txt {
          font-size: 0.28rem;
          color: #666;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        &.time {
          width: 100%;
        }
      }
    }
    .orderItem_file {
      background: #ebebeb;
      color: #333;
      border-radius: 5px;
      padding: 0.2rem 0;
      text-align: center;
      width: 100%;
      font-size: 0.28rem;
      display: flex;
      align-items: center;
      justify-content: center;
      .file_item {
        width: 33.33%;
        border-right: 1px solid #ccc;
        .icon-tel {
          font-size: 0.34rem;
          color: #35bc04;
          margin-right: 0.1rem;
        }
        .icon-mileage {
          font-size: 0.4rem;
          color: #409eff;
          margin-right: 0.1rem;
          position: relative;
          top: 0.04rem;
        }
        .icon-gw {
          font-size: 0.4rem;
          color: #409eff;
          margin-right: 0.1rem;
          position: relative;
          top: 0.04rem;
        }
        &:last-child {
          border: none;
        }
      }
    }
  }
}

// 跟进信息
.followInfo {
  padding: 0.2rem;
  background: #fff;
  height: 7rem;
  overflow: auto;
  .followInfo_item {
    margin-bottom: 0.2rem;
    position: relative;
    .followInfo_lt {
      width: 20%;
      .followInfo_time {
        font-size: 0.26rem;
        color: #999;
        position: absolute;
        top: 3px;
        left: -21px;
        width: 100px;
        text-align: center;
      }
      &::before {
        content: '';
        height: 130px;
        width: 1px;
        background: #ccc;
        position: absolute;
        top: 30px;
        left: 0.6rem;
      }
      .icon-circle {
        color: #ccc;
        z-index: 2;
        position: absolute;
        top: 40px;
        left: 0.42rem;
        background: #fff;
      }
    }
    .followInfo_rt {
      background: #f1f1f1;
      width: 80%;
      padding: 0.3rem 0 0.3rem 0.3rem;
      border-radius: 4px;

      .followInfo_num {
        font-size: 0.28rem;
        color: #333;
        margin-bottom: 0.1rem;
        margin-bottom: 0.2rem;
        font-weight: bold;
      }
      .followInfo_data {
        font-size: 0.26rem;
        color: #666;
        margin-bottom: 0.1rem;
        .followInfo_img {
          width: 0.8rem;
          height: 0.8rem;
          margin-right: 0.1rem;
        }
      }
    }
  }
}
.noContent {
  margin-top: 2rem;
}
.martop {
  margin-top: 0rem !important;
}
.pcCarInfo {
  font-size: 0.28rem;
  padding: 0.2rem;
  .carInfobox {
    .carInfobox_con {
      display: flex;
      flex-wrap: wrap;
      .carInfobox_data {
        margin-bottom: 0.25rem;
        width: 33%;
        .carInfobox_data_label {
          color: #999;
          margin-bottom: 0.1rem;
        }
        .txt {
          color: #666;
        }
      }
    }
  }
}
.pc_contact {
  padding: 0.2rem;
  .contactItem {
    justify-content: space-between;
    background: #fff;
    padding: 0.2rem;
    margin-bottom: 0.1rem;
    border-radius: 4px;
    border: 1px dashed #409eff;
    .contact_lt {
      .header {
        margin-bottom: 0.2rem;
        color: #333;

        .txt {
          font-size: 0.2rem;
          margin-right: 0.2rem;
          background: #409eff;
          padding: 0.1rem 0.2rem;
          border-radius: 4px;
          color: #fff;
        }
        .name {
          font-size: 0.28rem;
        }
      }
      .tel {
        font-size: 0.3rem;
        color: #333;
      }
    }
    .contact_rt {
      .icon-wx {
        font-size: 0.7rem;
        color: #409eff;
      }
      .icon-tel {
        font-size: 0.64rem;
        color: #35bc04;
        margin-right: 0.1rem;
        // font-size: 0.36rem;
        // background: #35bc04;
        // color: #fff;
        // text-align: center;
        // padding: 0.1rem;
        // border-radius: 50%;
        // position: relative;
        // top: -6px;
        // margin-right: 0.1rem;
      }
    }
  }
}
.pc_taskDetail {
  font-size: 0.28rem;
  padding: 0.2rem;
  .carInfobox {
    .carInfobox_con {
      display: flex;
      flex-wrap: wrap;
      .carInfobox_data {
        margin-bottom: 0.25rem;
        width: 20%;
        .carInfobox_data_label {
          color: #999;
          margin-bottom: 0.1rem;
        }
        .txt {
          color: #333;
        }
      }
    }
  }
}

.taskDetail_box {
  width: 100%;
  height: 3rem;
  background: #fff;
  margin-right: 0.2rem;
  box-sizing: content-box;
  .com_title {
    position: relative;
    background: #dcdcdc;
    font-size: 0.32rem;
    padding: 0.2rem;
    &::before {
      content: '';
      background: #409eff;
      width: 4px;
      position: absolute;
      height: 20px;
      top: 7px;
      left: 0;
    }
  }
}
.long_txt {
  display: -webkit-box; /* 将容器以弹性盒子形式布局 */
  -webkit-line-clamp: 2; /* 限制文本显示为两行 */
  -webkit-box-orient: vertical; /* 将弹性盒子的主轴方向设置为垂直方向 */
  overflow: hidden; /* 隐藏容器中超出部分的内容 */
  text-overflow: ellipsis; /* 超出容器范围的文本显示省略号 */
}
</style>
